<template>
    <keep-alive>
        <div class="admin-side">
            <div class="h-tile"><h2>资产管理系统</h2></div>
            <el-menu router :default-active="this.$route.path" class="el-menu-vertical-demo" text-color="#fff" active-text-color="#fff" active-background-color="#81aeff">
                <template v-for="nav in navData">
                  <el-menu-item :index="nav.url" :key="nav.index" v-if="nav.meunName !== '系统设置'">
                    <template slot="title">
                      <i class="icon" :class="nav.icon"></i>
                      <span slot="title">{{nav.meunName}}</span>
                    </template> 
                  </el-menu-item>
                  <el-submenu :key="nav.index" v-else>
                      <template slot="title">
                          <i class="icon icon-shezhi"></i>
                          <span>系统设置</span>
                      </template>
                      <el-menu-item-group>
                          <el-menu-item v-for="subNav in nav.children" :key="subNav.index" :index="subNav.url">{{subNav.meunName}}</el-menu-item>
                      </el-menu-item-group>
                  </el-submenu>
                </template>
            </el-menu>
        </div>
    </keep-alive>
</template>

<script>
export default {
  name: "Side",
  data() {
    return {
      navData: this.$store.getters.assetsAuthorization
    };
  },
  mounted() {
    this.$store.dispatch("setActivePath");
  }
};
</script>

<style lang="less" scoped>
.admin-side {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 999;
  width: 200px;
  overflow-x: hidden;
  top: 60px;
  width: 200px;
  background-color: #4674d6;
  z-index: 9;
  .h-tile {
    background: #224286;
    height: 45px;
    text-align: center;
    display: flex;
    align-items: center;
    h2 {
      color: #fff;
      width: 100%;
      font-size: 1rem;
    }
  }
}

.el-menu-item.is-active,
.el-menu-item:focus,
.el-menu-item:hover {
  background: #81aeff;
}
.el-menu-item i {
  color: #fff;
}

.router-link-active {
  background-color: #009688;
  color: #fff;
}
</style>